<template>
  <view class="p-20rpx">
    <view v-if="list.length">
      <view
        v-for="i in list"
        :key="i._id"
        style="transition: 300ms"
        :class="
          (expandIds.includes(i._id) ? 'h-186rpx' : 'h-78rpx') +
          ' p-20rpx overflow-hidden mb-20rpx bg-white rounded-10rpx'
        "
        @click="handleExpand(i._id)"
      >
        <view class="flex justify-between items-center">
          <text class="text-first text-base">{{ i.name }}</text>
          <view class="text-first text-base flex items-center">
            {{ i.time }}
            <u-icon
              :name="expandIds.includes(i._id) ? 'arrow-up' : 'arrow-down'"
              color="#666"
              size="12"
            ></u-icon>
          </view>
        </view>
        <view class="text-first text-base py-10rpx">{{ i.phone }}</view>
        <view class="text-first text-base">{{ i.address }}</view>
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="暂无数据"
    />
  </view>
</template>

<script lang="ts">
import { findIndex } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import { userStore } from '@/store'
const Components: Function = Component

@Components({ name: 'ClockInRecord' })
export default class ClockInRecord extends Vue {
  list: Recordable = []
  async onLoad() {
    const { powerType, name }: any = userStore.authInfo
    const db = wx.cloud.database()
    if (powerType === 'grider') {
      const { data: list } = await db
        .collection('clockInRecord')
        .where({
          name
        })
        .orderBy('time', 'desc')
        .get()
      this.list = list
      return
    }
    const { data: list } = await db
      .collection('clockInRecord')
      .orderBy('time', 'desc')
      .get()
    this.list = list
  }
  expandIds: Array<any> = []
  handleExpand(id: string) {
    const index = findIndex(this.expandIds, (i) => i === id)
    if (index >= 0) {
      this.expandIds.splice(+index, 1)
      return
    }
    this.expandIds.push(id)
  }
}
</script>
